<template>
    <div>
        <!-- 按钮 -->
        <el-popover placement="bottom-start" width="470" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" label-width="100px" :model="searchList" class="demo-ruleForm">
                <el-form-item label="记录生成时间" style="margin: 5px 0 0;"><el-date-picker v-model="searchList.time"  type="daterange" style="width: 305px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
                <el-button type="primary" @click="submitSearchData" style="margin: 7px 0 0 5px;padding: 7px 15px;">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>

        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" >
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="providerName" label="浆员" sortable min-width="90"></el-table-column>
            <el-table-column prop="idNo" label="身份证号" sortable min-width="180"></el-table-column>
            <el-table-column prop="machineNoName" label="机器编号" sortable min-width="120"></el-table-column>
            <el-table-column prop="isDeal" label="是否已处理" :formatter="formatterIsRecode" sortable min-width="140"></el-table-column>
            <el-table-column prop="createTime" label="记录生成时间" sortable min-width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="80">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="searchList.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableDataTotal"></el-pagination>

        <!-- 详情 -->
        <el-dialog title="详细信息" :visible.sync="isDialog" width="750px" top="60px"  :close-on-click-modal="false" >
            <el-row :gutter="20" style="margin-right: 0;" >
                <el-col :span="15">
                    <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="卡号"><el-input v-model="dialogList.cardId" disabled></el-input></el-form-item>
                        <el-form-item label="姓名"><el-input v-model="dialogList.providerName" disabled></el-input></el-form-item>
                        <el-form-item label="年龄"><el-input v-model="dialogList.age" disabled></el-input></el-form-item>
                        <el-form-item label="性别"><el-input v-model="dialogList.sex" disabled></el-input></el-form-item>
                        <el-form-item label="身份证号"><el-input v-model="dialogList.idNo" disabled></el-input></el-form-item>
                        <el-form-item label="电话"><el-input v-model="dialogList.phone" disabled></el-input></el-form-item>
                        <el-form-item label="地址"><el-input v-model="dialogList.address" disabled></el-input></el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <img :src="dialogList.photo" style="width: 200px" />
                </el-col>
            </el-row>

            <h3 class="dialog-plate-title" style="margin-top: 15px;"><span>采浆信息</span></h3>
            <el-form :inline="true" :model="dialogList" :rules="dialogRules" ref="dialogRules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="总采血量/圈" prop="totalBloodNum"><el-input v-model="dialogList.totalBloodNum"></el-input></el-form-item>
                <el-form-item label="总采浆量/g" prop="totalPlasmaNum"><el-input v-model="dialogList.totalPlasmaNum"></el-input></el-form-item>
                <el-form-item label="抗凝剂用量/g" prop="useKngNum"><el-input v-model="dialogList.useKngNum"></el-input></el-form-item>
                <el-form-item label="盐水用量/g"><el-input v-model="dialogList.useYsNum"></el-input></el-form-item>
                <el-form-item label="皮重/g" prop="initWeight"><el-input v-model="dialogList.initWeight"></el-input></el-form-item>
                <el-form-item label="循环次数" prop="cycles"><el-input v-model="dialogList.cycles"></el-input></el-form-item>
                <el-form-item label="采浆开始时间" prop="startTime" ><el-date-picker v-model="dialogList.startTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss" ></el-date-picker></el-form-item>
                <el-form-item label="采浆完成时间" prop="endTime">
                    <el-date-picker v-model="dialogList.endTime" type="datetime"  value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker></el-form-item>
                <el-form-item label="是否已处理" prop="isDeal"><el-select v-model="dialogList.isDeal" style="width: 200px;"><el-option :value="1" label="是"></el-option><el-option :value="0" label="否"></el-option></el-select></el-form-item>
                <el-form-item label="采浆护士"><el-input v-model="dialogList.nurseName" disabled></el-input></el-form-item>
                <el-form-item label="记录生成时间"><el-input v-model="dialogList.createTime" disabled></el-input></el-form-item>
                <el-form-item><el-button type="primary" @click="submitDialog" style="margin-left: 650px;">提交</el-button></el-form-item>
            </el-form>
        </el-dialog>


    </div>
</template>

<script>
    import api from 'plugins/axios/api.js';
    export default {
        name: "untreated",
        data(){
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                tableHeight: document.documentElement.clientHeight - 160,
                tableDataTotal:0,
                tableData:[],
                searchList:{
                    currentPage: 1,
                    pageSize: 10,
                    startCreateTime:'',
                    endCreateTime:'',
                    time:"",
                },

                //详情
                isDialog:false,
                dialogTitle:'',
                dialogList:{
                    address: "",
                    age: '',
                    cardId: '',
                    collTaken: '',
                    collectionDate: '',
                    createTime: '',
                    cycles: '',
                    dealTime: '',
                    endTime: '',
                    fingerPrint: '',
                    hcBatchNo: '',
                    htc: '',
                    id: '',
                    idNo: '',
                    initWeight: '',
                    installEndTime: '',
                    installStartTime: '',
                    installTaken: '',
                    isDeal: '',
                    knjBatchNo: '',
                    logTime: '',
                    machineLogId: '',
                    machineNo: '',
                    machineNoName: '',
                    nurse: '',
                    nurseName: '',
                    operTime: '',
                    phone: '',
                    photo: '',
                    providerName: '',
                    providerNo: '',
                    punctureEndTime: '',
                    punctureStartTime: '',
                    punctureTaken: '',
                    regId: '',
                    registerNo: '',
                    remark: '',
                    secondPuncture: '',
                    selfCheckResult: '',
                    selfCheckTime: '',
                    setCollectingSpeed: '',
                    setCuffPressure: '',
                    setHsSpeed: '',
                    setSingleLayerNum: '',
                    setTotalNum: '',
                    sex: '',
                    startTime: '',
                    syscTime: '',
                    totalBloodNum: '',
                    totalPlasmaNum: '',
                    uninstallEndTime: '',
                    uninstallStartTime: '',
                    uninstallTaken: '',
                    useKngNum: '',
                    useYsNum: '',
                    ysBatchNo: '',
                },
                dialogRules: {
                    cycles: [
                        { required: true, message: '请输入...', trigger: 'blur' },
                    ],
                    initWeight: [
                        { required: true, message: '请输入...', trigger: 'blur' },
                    ],
                    totalBloodNum: [
                        { required: true, message: '请输入...', trigger: 'blur' },
                    ],
                    totalPlasmaNum: [
                        { required: true, message: '请输入...', trigger: 'blur' },
                    ],
                    useKngNum: [
                        { required: true, message: '请输入...', trigger: 'blur' },
                    ],
                    startTime: [
                        { required: true, message: '请选择...', trigger: 'change' },
                    ],
                    endTime: [
                        { required: true, message: '请选择...', trigger: 'change' },
                    ],
                    isDeal: [
                        { required: true, message: '请输入...', trigger: 'change' },
                    ],
                },
            }
        },
        created() {
            this.searchList.currentPage= 1;
            this.searchList.pageSize= 10;
            this.getData(this.searchList);
        },
        methods: {
            // getData( data ) {
            //     let list = {
            //         currentPage:data.currentPage,
            //         pageSize: data.pageSize,
            //         startCreateTime:data.startCreateTime,
            //         endCreateTime:data.endCreateTime,
            //     };
            //     console.log( list )
            //     let _this = this;
            //     let loading = this.$loading({
            //         target: document.querySelector(".wrapper > .content-box"),
            //         lock: true,
            //         text: '正在努力加载中...',
            //         spinner: 'el-icon-loading',
            //         background: 'rgba(0, 0, 0, 0.8)'
            //     });
            //     this.$http({
            //         url: '/api/adscm/application/providerCollection/selectNoDealProviderCollection?tokenId='+_this.tokenId,
            //         method: 'post',
            //         headers: {'X-Requested-With': 'XMLHttpRequest'},
            //         data: list
            //     }).then(function (res) {
            //         console.log( res.data.content.records )
            //         if (res.data.statusCode == 200) {
            //             _this.tableDataTotal = res.data.content.total;
            //             _this.tableData = res.data.content.records;
            //         } else {
            //             _this.$message.error(res.data.desc);
            //         }
            //         loading.close();
            //     }).catch(function (catchres) {
            //         _this.$message.error("加载失败！请重新加载...");
            //         loading.close();
            //     })
            // },
         getData(data){//获取体检记录列表
                let self = this;
                self.loading=true;
                let list = {
                        currentPage:data.currentPage,
                        pageSize: data.pageSize,
                        startCreateTime:data.startCreateTime,
                        endCreateTime:data.endCreateTime,
                };
                api.getUntreatedData(list).then(res=>{
                self.tableData=res.content.records;
                self.loading=false;
                self.tableDataTotal = res.content.total;
                },error=>{
                 self.loading=false;
                })
        },

            submitSearchData(){
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            updateDialog(row){
                console.log( row )
                this.isDialog = true;
                this.dialogList = row;
                this.dialogList.isDeal = parseInt(row.isDeal);
                this.$refs['dialogRules'].resetFields();
            },
            // submitDialog(){
            //     let _this = this;
            //     _this.$refs.dialogRules.validate((valid) => {
            //         console.log( valid )
            //         if (valid) {
            //             _this.dialogList.startTime = _this.timestampToTime(_this.dialogList.startTime);
            //             _this.dialogList.endTime = _this.timestampToTime(_this.dialogList.endTime);
            //             _this.$http({
            //                 url: '/api/adscm/application/providerCollection/updateNoDealProviderCollection?tokenId='+_this.tokenId,
            //                 method: 'post',
            //                 headers: {'X-Requested-With': 'XMLHttpRequest'},
            //                 data: _this.dialogList
            //             }).then(function (res) {
            //                 console.log( res.data )
            //                 if (res.data.statusCode == 200) {
            //                     _this.isDialog = false;
            //                     _this.getData(_this.searchList);
            //                 } else {
            //                     _this.$message.error(res.data.desc);
            //                 }

            //             }).catch(function (catchres) {
            //                 _this.$message.error("加载失败！请重新加载...");
            //             })
            //         } else {return false;}
            //     })
            // },

              submitDialog(){/** 更新后台信息*/
                let self = this;
                self.loading=true;
                api.addUpdataUntreatedInfo(self.dialogList).then(res=>{
                    self.loading=false;
                    self.$message.success('信息编辑成功！');
                    self.getData();
                    self.isDialog = false;
                },error=>{
                    self.loading=false;
                })

                },

            handleSizeChange(size) {
                this.searchList.pageSize = size;
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            handleCurrentChange(currentPage) {
                this.searchList.currentPage = currentPage;
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            timestampToTime (timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                    let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                    return timestamp ? Y + M + D + h + m + s : '';
                } else {
                    return '';
                }
            },
        },
    }
</script>

<style scoped></style>

